<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb>
      <el-breadcrumb-item>
        <i class="el-icon-s-home"></i>
        首页
      </el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 头部导航 -->
    <div class="tab">
      <router-link to="/home">
        <i class="el-icon-arrow-left" style="font-size: 20px; font-weight: bold; color: #000;"></i>
      </router-link>
      <p style="font-size: 14px; font-weight: bold;margin-left: 20px;">分类管理</p>
    </div>
    <div class="content">
      <table>
        <th>显示名称</th>
        <th>图片</th>
        <th>排序</th>
        <th>操作</th>
        <tr v-for="item in data">
          <td>{{ item.name }}</td>
          <td>
            <img style="width: 60px; height: 50px;" :src="item.img" alt="">
          </td>
          <td>{{ item.sort }}</td>
          <td>
            <button class="btn" @click="setMes(item)">修改信息</button>
          </td>
        </tr>
      </table>
      <!-- 弹窗 -->
      <div class="zz" v-show="flag">
        <div class="set">
          <!-- 头部 -->
          <div class="setTop">
            <p style="color: #fff;">修改分类名称</p>
            <i class="el-icon-close" style="font-size: 20px;font-weight: bold;color:" @click="setclose"></i>
          </div>
          <div style="padding: 20px 80px;">
            <div class="line">
              <p class="left">原名称:</p>
              <p>{{ yuanName }}</p>
            </div>
            <div class="line">
              <p class="left" style="margin-top: 5px;">修改:</p>
              <el-input class="ipt" type="text" size="small" placeholder="请填写分类名称" v-model="name"></el-input>
            </div>
            <div class="line">
              <p class="left" style="margin-top: 5px;">图片:</p>
              <el-upload class="upload-demo" action="http://127.0.0.1:7001/upload" :on-success="ok"
                :before-remove="beforeRemove" multiple :limit="1" :on-exceed="handleExceed" :file-list="fileList">
                <el-button size="small" type="info" plain>点击上传</el-button>
              </el-upload>
            </div>
            <div class="line">
              <p class="left" style="margin-top: 5px;">排序:</p>
              <el-select size="small"  v-model="select" placeholder="请选择">
                <el-option  v-for="item in options" :key="item" :label="item" :value="item">
                </el-option>
              </el-select>
            </div>
            <p class="p">数字越小越靠前</p>
            <div class="btnDiv">
              <button class="qd" @click="setOk">确定</button>
              <button class="qd1" @click="setclose">取消</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {getHomeSortBx,setHomeSortBx} from '../../utils/api'
export default {
  data() {
    return {
      flag: false,
      name: '',
      fileList: [],
      select:'',
      options:[1,2,3,4,5,6,7,8],
      imghttp:'',
      data:[],
      yuanName:'',
      itemId:0,
    }
  },
  created(){
    this.render()
  },
  methods: {
    render(){
      getHomeSortBx().then(res=>{
        res.data.data.sort((a,b)=>{
          return a.sort - b.sort
        })
        this.data = res.data.data
      })
    },
    setMes(i) {
      this.flag = true
      this.itemId = i.id
      this.yuanName = i.name
      this.select = i.sort
      this.imghttp = i.img
      this.name = i.name
    },
    setOk(){
      setHomeSortBx({id:this.itemId,name:this.name,img:this.imghttp,sort:this.select}).then(res=>{
        if(res.status == 200){
          this.flag = false
          this.render()
        }
      })
    },
    setclose() {
      this.flag = false
    },
    ok(file, fileList) {
      const obj = file.data.replaceAll('\\\\', '\\/')
      const http = "http://127.0.0.1:7001" + obj
      this.imghttp = http.replaceAll("\\", "\/")

    },
    handleExceed(files, fileList) {
      this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    }
  }
}
</script>
<style scoped>
.qd{
  background-color: #0790F5;color: #fff;
  border: none;
  font-size: 14px;
  border-radius: 5px;
  width: 50px;
  height: 30px;
}
.btnDiv {
  width: 40%;
  display: flex;
  margin-left: 100px;
  margin-top: 30px;
  justify-content: space-between;
} 
.qd1 {
  border: 1px solid rgba(187, 187, 187, 1);
  color: rgba(16, 16, 16, 1);
  font-size: 14px;
  background-color: #fff;
  border-radius: 5px;
  width: 50px;
  height: 30px;
}
.p{
  color:#8e8e8e;
font-size: 12px;
margin-left: 100px;
margin-top: -25px;
}
.ipt {
  width: 180px;
  height: 30px;
  margin-left: -8px;
  padding: 0 10px;
  /* border: 1px solid rgba(187, 187, 187, 1); */
}

.left {
  width: 50px;
  margin-right: 50px;
}

.line {
  display: flex;
  margin-bottom: 30px;
}

.setTop {
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  background-color: #BBBBBB;
}

.set {
  font-size: 14px;
  width: 40%;
  height: 400px;
  position: absolute;
  top: 50%;
  left: 60%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  background: #ffffff;
  border-radius: 5px;

}

.zz {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
}

table {
  margin-top: 30px;
  border: 1px solid #777777;
  border-collapse: collapse;
  text-align: center;
  width: 100%;
  font-size: 14px;
}

tr {
  height: 50px;
}

td {
  width: 150px;
  border: 1px solid #777777;
}

th {
  height: 50px;
  line-height: 50px;
  font-weight: normal;
  background-color: #F6F6F6;
  border: 1px solid #777777;
}

.btn {
  margin-left: 10px;
  margin-right: 10px;
  border: none;
  color: #0790F5;
  font-weight: bold;
  background-color: #fff;
}

.content {
  width: 75%;
  margin: 20px auto;
  height: 100%;
}

.tab {
  padding: 20px 40px;
  display: flex;
}</style>